<template>
  <div>
    <p class="title">广播分类设置</p>
    <div class="search-box">
      <div>
        <label>状态：</label>
        <el-select v-model="query.state" size="small" placeholder="请选择" @change="search">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </div>
      <el-button type="primary" size="small" @click="dialogFormVisible=true">新建</el-button>
    </div>
    <!-- 表格 -->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" border>
      <el-table-column label="序号" width="80" type="index"></el-table-column>
      <el-table-column prop="btName" label="分类名称">
      </el-table-column>
      <el-table-column prop="createtime" label="创建时间">
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state=='1'">上架</span>
          <span v-else>下架</span>
        </template>
      </el-table-column>
      <el-table-column prop="activeTime" label="操作">
        <template slot-scope="scope">
          <el-button @click="dialogFormVisible=true" type="text" size="small">编辑</el-button>
          <el-button type="text" size="small">{{scope.row.state=='1'? '下架':'上架'}}</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <page :total="total" :PageNumber.sync="query.pageNumber" :PageSize.sync="query.pageSize"
      @current-change="changeCurrentPage" @size-change="handleSizeChange">
    </page>
    <!-- 新建/编辑 -->
    <el-dialog title="新建" center :visible.sync="dialogFormVisible" width="600px">
      <el-form :model="form" label-width="120px">

        <el-form-item label="分类名称：">
          <el-input></el-input>
        </el-form-item>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false" size="small">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import page from "@/components/page"
  import apis from "@/apis/modules/radioLabelSetting"
  export default {
    components: {
      page
    },
    data() {
      return {
        dialogFormVisible: false,
        form: {},
        query: {
          state: 'all',
          pageNumber: 1,
          pageSize: 10,
        },
        options: [{ value: 'all', label: "全部" }, { value: '1', label: "已上架" }, { value: '2', label: "已下架" }],
        tableData: [],
        total: 0,
      };
    },
    mounted() {
      this.getBroadcastType();
    },
    methods: {
      //获取广播类型列表
      async getBroadcastType() {
        const { code, data, msg } = await apis.getBroadcastType(this.query)
        if (code == 200) {
          this.tableData = data.list;
          this.total = data.count;
        }
      },
      // 搜索
      search() {
        this.query.pageNum = 1;
        this.getBroadcastType();
      },
      //改变当前页数
      changeCurrentPage(val) {
        this.getBroadcastType();
      },
      //改变每页显示条数
      handleSizeChange(val) {
        this.getBroadcastType();
      },

    },


  };
</script>

<style lang="scss" scoped>
  .search-box {
    margin: 32px 0;
    text-align: right;
  }
</style>